<script setup="">
import { useRoute, useRouter } from "vue-router"
import TestDemo from "@/components/TestDemo.vue"
import { useCountStore, useUserStore } from "@/stores/index.js"

defineOptions({
  name: "App",
})

// 在 Vue3 中，可以在模板中使用 $router.push 的方式实现跳转
// 1.获取路由对象 router 需要使用 useRouter()
const router = useRouter()
// 2.获取路由参数 route 需要使用 useRoute()
const route = useRoute()

const goList = () => {
  console.log(router, route)
  router.push("/list")
}

const userStore = useUserStore()
const countStore = useCountStore()
</script>

<template>
  <div>
    <hr />
    <hr />
    <hr />

    <router-view />

    <hr />
    <hr />
    <hr />
    I am App
    <el-button @click="$router.push('/home')">跳首页</el-button>
    <el-button @click="goList">跳列表页</el-button>
    <TestDemo />
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <hr />
    {{ userStore.token }}
    <el-button @click="userStore.setToken('aaa-bbb-ccc')">登录</el-button>
    <el-button @click="userStore.removeToken">退出</el-button>
  </div>
</template>

<style scoped></style>
